<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>index</title>
    <script src="../js/jquery-2.1.4.min.js"></script> 
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <script type="text/javascript" src="../js/public.js" ></script>
    <script type="text/javascript" charset="UTF-8"> 
      	mui.init();   
    </script>   
    <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    	.mui-bar-tab .mui-tab-item.mui-active {color:#7EC60F;}
    	.mui-bar a{position: relative;}
       	.red-circle{border-radius: 100%;background: red;display: none;padding: 4px;position: absolute;right: 19px;top: 3px;}
    </style>
    <script>     
	    document.addEventListener('plusready' , ready , false);
	    function ready(){    
	    	plus.storage.setItem('index' , plus.webview.currentWebview().id);
	    	var memberInfo = plus.storage.getItem('memberInfo');
			memberInfo = $.parseJSON(memberInfo);
	    	$.ajax({ 
				type : 'post',     
				url : apiRoot +'/Home/Message/myMessage/',
				data : {  
					uid : memberInfo.aid  
				},   
				success : function(data){
					plus.storage.setItem('message' , data+''); 
					var res = eval('('+data+')'); 
					var flag = ''; 
					if(res.new){
						plus.storage.setItem('newMsg' , 'true');
						$('.red-circle').css('display' , 'inline-block');
					}else{  
						$('.red-circle').css('display' , 'none');
						plus.storage.setItem('newMsg' , 'false');
					}
					setTimeout('ready()' , 10000);
				}, 
				error : function(e){
					setTimeout('ready()' , 10000);
				}
			})
	    }
    </script>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
			<i class="mui-icon iconfont icon-shouye"></i>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="nav.html">
			<i class="mui-icon iconfont icon-faxian"></i>
			<span class="mui-tab-label">导航</span>
		</a>
		<a class="mui-tab-item" href="bbs-list.html">
			<i class="mui-icon iconfont icon-appluntan"></i>
			<span class="mui-tab-label">论坛</span> 
		</a>
		<a class="mui-tab-item" href="me.html">
			<span class="red-circle"></span>
			<i class="mui-icon iconfont icon-jikediancanicon03"></i>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
</body>

	<script type="text/javascript" charset="utf-8">
		 //mui初始化
		mui.init();
		var subpages = ['home.html','nav.html','bbs-list.html','me.html']; 
		var subpage_style = {
			top: '0px',
			bottom: '51px'
		};
		
		var aniShow = {};
		
		 //创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < subpages.length; i++) {
//				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
//				if (i > 0) {
//					sub.hide();
//				}else{
//					temp[subpages[i]] = "true";
//					mui.extend(aniShow,temp);
//				}
//				self.append(sub);
			}
			
			/*以下是避免底部选项卡被页面遮挡的操作*/
				var webs = plus.webview.getWebviewById(subpages[0]);/*监听其中加载数据最慢的一个子页面*/
				webs.addEventListener('loaded',function(){
						var temp = {};
					for (var i = 0; i <subpages.length; i++) {
						var sub = plus.webview.getWebviewById(subpages[i]);
						if (i > 0) {
							sub.hide();
						} else {
							temp[subpages[i]] = "true";
							mui.extend(aniShow, temp);
						}
						self.append(sub);
					}			
				},false);
				/*等待页面加载完成后再进行显隐操作*/
		});
		 //当前激活选项
		var activeTab = subpages[0];
		
		 //选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//更换标题
			
			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				//temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
		 //自定义事件，模拟点击“首页选项卡”
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
		var first = null;
		mui.back = function() {
			//首次按键，提示‘再按一次退出应用’
			if (!first) {
				first = new Date().getTime();
				mui.toast('再按一次退出应用');
				setTimeout(function() {
					first = null;
				}, 2000);
			} else {
				if (new Date().getTime() - first < 2000) {
					plus.runtime.quit();
				}
			}
		};
	</script>
</html>